<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="main" style="min-width: 450px; height: 650px;"></div>
</body>
<script>   

    var visualMap = echarts.init(document.getElementById('main'));
        $.ajax({
            url : "weibo.json",
            type : "get",
            async : true,
            dataType : "json",
            success :function(weiboData){
            Data = function (index) {
                data = weiboData[index];
                var px = data[0] / 1000;
                var py = data[1] / 1000;
                var res = [[px, py]];
    
                for (var i = 2; i < data.length; i += 2) {
                    var dx = data[i] / 1000;
                    var dy = data[i + 1] / 1000;
                    var x = px + dx;
                    var y = py + dy;
                    res.push([x, y]);
                    px = x;
                    py = y;
    
                }
                return res;
            };
    
            visualMap.setOption({
                   //标题
               title : {
                   text : "微博签到数据点亮中国",
                   left : "center",
                   top  : 10,
                    textStyle: {
                        color: '#fff'
    
                    }
               },
               //背景颜色
               backgroundColor : "#303a47",
                geo: {           //地理坐标系组件
                    name: '强',
                    type: 'scatter',
                    map: 'china',
                    itemStyle: {   
                            areaColor: '#233f4c'   //地图区域的颜色
                    }
                },
    
                series: [{              //系列列表
                    name: '弱',
                    type: 'scatter',    //散点（气泡）图
                    coordinateSystem: 'geo',  //使用地理坐标系
                    symbolSize: 1,     
                    large: true,       //大数据量优化
                    itemStyle: {       //图形样式
                        normal: {
                            color: '#4169E1'
                        }
                    },
    
                    data: Data(0)
    
                }, {
                    name: '中',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 1,
                    large: true,
                    itemStyle: {
                        normal: {
                            color: '#B0E0E6'
                        }
                    },
                    data: Data(1)
    
                }, {
                    name: '强',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 1,
                    large: true,
                    itemStyle: {
                        normal: {
                            color: '#E1FFFF'
                        }
                    },
                    data: Data(2)
                }]
            });
            }
        })
    </script>
</html>